<!-- 预约挂号首页 -->
<template>
	<view class="online-registration-wrapper">
		<HM-filterDropdown :menuTop="menuTop" :filterData="filterData" :defaultSelected="defaultSelected"
			@confirm="confirm"></HM-filterDropdown>

		<scroll-view class="week-scroll-view" :scroll-x="true">
			<div class="week-item" :class="{'active': currentWeekDataItem == item.dateStr}"
				v-for="(item, index) in weekData" :key="index" @click="clickWeekHandler(item)">
				<p>周{{item.week}}</p>
				<p>{{item.dateStr.slice(5, item.dateStr.length)}}</p>
			</div>
		</scroll-view>

		<view class="list-wrapper">
			
			<u-empty v-if="doctorData.length == 0" mode="search" text="未找到查询结果, 请确认选择了科室和日期" :iconColor="'#41C177'"
				icon="http://cdn.uviewui.com/uview/empty/search.png">
			</u-empty>
			<view v-else>
				<view class="doctor-item" v-for="(item, index) in doctorData" :key="index"
					@click="goToDoctorSchedule(item)">
					<view class="left-icon">
						<image src="https://zhyl.setupgx.cn/attachment/app/icon/doctor.png"></image>
					</view>
					<view class="center-wrapper">
						<p>{{item.DoctorName}}<span class="professional-label">{{item.DoctorTitle}}</span></p>
						<p class="appointment-num">挂号费：<span class="num">￥{{item.Money}}</span></p>
						<p class="time">时段：{{item.Time}}</p>
					</view>
					<view class="right-label">
						<span>剩余{{item.WeChatAvailableForRegister}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import data from './data.js'
	import {
		getCurrentDayAfter,
		getCurrentDay
	} from '../../common/dateUtil.js'
	export default {
		data() {
			return {
				currentUserCard: {
					names: ''
				},
				filterData: [{
					"name": '请选择科室...',
					"type": 'hierarchy-column',
					"submenu": [
						// {
						// 	"name": "皮肤科",
						// 	"value": "皮肤科"
						// },
						// {
						// 	"name": "皮肤科（普通医师）",
						// 	"value": "皮肤科（普通医师）"
						// }
					]
				}],
				weekData: [],
				currentWeekDataItem: '',
				defaultSelected: [],
				currentDeptId: '',
				currentDeptName: '',
				doctorData: [],
				uriDeptName: ''
			}
		},
		onLoad(option) {
			this.uriDeptName = option.deptName
			this.currentUserCard = uni.getStorageSync('current_user_card')
			this.weekData = getCurrentDayAfter(new Date(), 14)
			this.currentWeekDataItem = getCurrentDay()
			this.api_deptonduty()
		},
		onShow() {
			if (this.currentUserCard.names == '') {
				uni.navigateTo({
					url: '/pages/tabbar/myCenter/filing'
				})
			}
		},
		methods: {
			confirm(e) {
				this.currentDeptName = this.filterData[0].submenu[e.index[0][0]].name
				this.currentDeptId = e.value[0][0]
				if (this.currentDeptId && this.currentWeekDataItem) {
					this.api_deptdoctor(this.currentDeptId, this.currentWeekDataItem)
				}
			},
			/**
			 * 点选日期
			 * @param {Object} item
			 */
			clickWeekHandler(item) {
				this.currentWeekDataItem = item.dateStr
				if (this.currentDeptId && this.currentWeekDataItem) {
					this.api_deptdoctor(this.currentDeptId, this.currentWeekDataItem)
				}
			},

			goToDoctorSchedule(item) {
				uni.navigateTo({
					url: '/pagesB/onlineRegistration/doctorSchedule?item=' + JSON.stringify(item) + '&startdate=' +
						this.currentWeekDataItem + '&selectDeptId=' + this.currentDeptId + '&selectDeptName=' + this.currentDeptName
				})
			},

			/**
			 * 查询排班科室信息
			 */
			api_deptonduty() {
				this.$app._post_form2("entry/wxapp/apiregistration.deptonduty", {
					"date": "",
					"timezone": "0"
				}, (res) => {
					if (res.status === 1) {
						res.data.forEach(item => {
							this.filterData[0].submenu.push({
								name: item.DepartmentName,
								value: item.DepartmentId
							})
						})
						console.log(this.uriDeptName)
						if (this.uriDeptName) {
							for (let i = 0; i < this.filterData[0].submenu.length; i++) {
								console.log(this.filterData[0].submenu[i].value)
								if(this.filterData[0].submenu[i].name == this.uriDeptName) {
									this.defaultSelected = [[i]]
									this.currentDeptId = this.filterData[0].submenu[i].value
									this.api_deptdoctor(this.filterData[0].submenu[i].value, this.currentWeekDataItem)
								}
							}
						}
					}
				})
			},
			/**
			 * 获取科室医生列表
			 * @param {Object} deptid
			 */
			api_deptdoctor(deptid, date = '') {
				this.doctorData = []
				this.$app._post_form2("entry/wxapp/apiregistration.deptdoctor", {
					"deptid": deptid,
					"date": date,
					"timezone": "0"
				}, (res) => {
					if (res.status === 1) {
						console.log(res)
						res.data.forEach(item => {
							this.doctorData.push(item)
						})
					}
				})
			}
		},
		computed: {
			menuTop() {
				/* #ifdef MP-ALIPAY || MP-WEIXIN */
				return "0"
				/* #endif */
				return "84"
			}
		}
	}
</script>

<style lang="scss">
	.online-registration-wrapper {
		width: 100%;
		height: 100%;
		color: #757575;
	}

	.week-scroll-view {
		margin-top: 45px;
		width: 100%;
		white-space: nowrap;
		border-bottom: 1px solid #EEEEEE;

		.week-item {
			height: 40px;
			background-color: #fff;
			display: inline-block;
			font-size: 0.7rem;
			text-align: center;
			padding: 5px;
			box-sizing: border-box;

			&.active {
				background-color: #41C177;
				color: #fff;
			}
		}
	}

	.list-wrapper {
		width: 100%;

		.not-data {
			width: 100%;
			text-align: center;
			margin-top: 100px;

			image {
				width: 120px;
				height: 100px;
			}
		}

		.doctor-item {
			position: relative;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #EEEEEE;
			background-color: #fff;
			padding: 12px 15px;

			.left-icon {
				width: 50px;
				height: 50px;
				border-radius: 50px;
				background-color: #4caf50;
				display: flex;
				flex-direction: row;
				align-items: center;
				text-align: center;
				justify-content: center;

				image {
					width: 30px;
					height: 30px;
				}
			}

			.center-wrapper {
				display: flex;
				flex: 1;
				flex-direction: column;
				padding-left: 10px;
				font-size: 1rem;

				.professional-label {
					margin-left: 6px;
					margin-right: 6px;
					font-size: 0.8rem;
				}

				.appointment-num {
					font-size: 0.6rem;

					.num {
						color: #ff9800
					}
				}

				.time {
					font-size: 0.6rem;
				}
			}

			.right-label {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;

				span {
					font-size: 0.6rem;
					background-color: #4caf50;
					color: #fff;
					padding: 2px 5px 2px 5px;
					border-radius: 10px;
				}
			}
		}

	}
</style>